<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <title>Title</title>
    {{include 'views/link.html'}}
</head>
<body>
<div>头部--留空</div>
<h2>图片卡片</h2>

<div class="container">
    <div class="row">
        <div class="col-12 col-md-4">
            <p>图片标题</p>
            <div class="card" style="width:100%">
                <img class="card-img-top" data-video="video/a.mp4" src="img/22222.jpg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <p>图片标题</p>
            <div class="card" style="width:100%">
                <img class="card-img-top" data-video="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4" src="img/22222.jpg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <p>图片标题</p>
            <div class="card" style="width:100%">
                <img class="card-img-top" data-video="video/a.mp4" src="img/22222.jpg" alt="Card image" style="width:100%">
                <div class="card-body">
                    <h4 class="card-title">John Doe</h4>
                    <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p>
                    <a href="#" class="btn btn-primary">See Profile</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Small modal -->
<div class="modal fade bd-example-modal-sm" id="my-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div id="dplayer"></div>
        </div>
    </div>
</div>
<script>
    let dp = null;

    $(document).ready(function () {
        $('#my-modal').on('hidden.bs.modal', function (e) { //bootstrap自带的监听隐藏模态事件
            if(dp&&dp.pause)dp.pause();  //触发事件后，判断是否有dplayer对象和pause开始播放事件，如有再执行pause则停止
        })
        $('.card-img-top').click(function () {
            var mp4Video=$(this).data('video');  //获得元素上的 data-video属性值
            var src=$(this).attr('src');
            console.log(mp4Video);
            $('#my-modal').modal('show')   //bootstrap除了用bottun控制，还能用js控制显示/隐藏
            if (!dp){  //如果没有才新建DPlayer对象，添加属性
                dp=new DPlayer({
                    container: document.getElementById('dplayer'),
                    video: {
                        url: mp4Video,  //视频地址
                        pic:src,  //封面图片
                        thumbnails:src
                    },
                });
            }else{   //如已有dplayer对象，意思已有视频源
                //判断元素src是带域名地址，还是本地/..地址，currentSrc地址默认带服务器域名地址http...
                mp4Video=mp4Video.indexOf('http')>-1?mp4Video:(dp.video.baseURI+mp4Video);
                //再判断点击拿到的链接是不是当前dp对象，是就不切换继续接着播放，如不是就切换新播放源地址
                if(dp.video.currentSrc!==mp4Video){
                    dp.switchVideo({   //切换其他视频，设置其属性
                        url:mp4Video,
                        pic:src,
                        type:'auto'
                    })
                }
            }
        })
    })


</script>
</body>
</html>